<template>
  <div class="select-table">
    <basic-container>
      <el-row>
         <el-col :span='2'>
             <addTripContent/>
            </el-col>
          <el-col :span='6'>
           <el-input class="bottom"
           size="small"
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input8">
           </el-input>
          </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column
          type="selection"
          width="55">
        </el-table-column> -->
        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="trip_time"
          label="发布时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="trip_writer"
          label="编辑">
        </el-table-column>
          <el-table-column
          prop="trip_content"
          label="内容">
        </el-table-column>
    <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button
              @click="handleView(scope.row)"
              type="primary"
              size="small">查看</el-button>
            <el-button
              @click="handleDelete([scope.row].map(i => i.id))"
              type="danger"
              size="small" value="prop.id">删除</el-button>
        <!-- <i style="display:none;" @click="vi([scope.row].map(i => i.id))"> -->
         <i @click="vi([scope.row].map(i => i.id))"><putContentTrip/></i>
          </template>
        </el-table-column>
      </el-table>
    </basic-container>
  </div>
</template>

<script>
import axios from 'axios'
import BasicContainer from '@vue-materials/basic-container'
import addTripContent from '@/pages/trip_content/components/add_trip_content/index'
import putContentTrip from '@/pages/trip_content/components/put_trip_content/index'
export default {
  components: { BasicContainer, addTripContent, putContentTrip },
  name: 'SelectTable',
  data () {
    return {
      tableData: [],
      selections: [],
      input8: ''
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.selections = val
    },
    handleDelete (idArray) {
      // console.log(idArray);
      axios.delete(`http://trip.com/reception/tripContent/delete/${idArray}`).then(response => {
        //  console.log(response);
        this.view()
      })
    // this.tableData = this.tableData.filter(i => !idArray.includes(i.id));
    },
    handleView (row) {
      const content = `
        <div>标题：${row.title}</div>
        <div>发布时间： ${row.trip_time}</div>
        <div>内容${row.trip_content}</div>
        <div>图片: <div><img src='trip.com${row.pic}' class='pic' /></div></div>
      `
      const title = '商品详情'
      this.$alert(
        content,
        title,
        {
          dangerouslyUseHTMLString: true,
          callback: () => {
            // TODO: MessageBox callback;
          }
        }
      )
    },
    vi (id) {
      this.$store.state.data = id
    },
    view () {
      axios.get('http://trip.com/reception/tripContent/view').then(res => {
        this.tableData = res.data
      })
    }
  },
  created () {
    this.view()
  }
}
</script>

<style>
.margin{
  margin-left: 20px;
}
.bottom{
  margin-bottom: 20px;
}
.pic{
  width: 20px;
  height: auto;
}
</style>
